<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/manageBlog' }">文章管理</el-breadcrumb-item>
            <el-breadcrumb-item>博客更新</el-breadcrumb-item>
        </el-breadcrumb>
        
        <div style="margin-top:10px">
            <el-input v-model="articleTitle" placeholder="请输入文章标题"></el-input>
        </div>

        <div style="margin-top:10px">
            <mavon-editor v-model="detail" :toolbars="toolbars" @keydown="" style="" ref=md @imgAdd="$imgAdd"/>
        </div>

        <el-row style="margin-top:20px;text-align:left">
            <el-col :span="24">
                博客分类：
                <div class="grid-content bg-purple-light">
                    <ul style="display:inline-block;">
                        <li v-for="item in articleTypeList" style="list-style:none;float:left;margin-left:5px">
                            <el-checkbox v-model="item.flag" @change="addTypes(item.name,item.flag)"> {{item.name}}</el-checkbox> &nbsp;
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>

        <el-row style="margin-top:20px;text-align:left">
            <el-col :span="12">
               <div class="grid-content bg-purple">
                    是否原创：
                    <el-radio v-model="original" label="1">原创</el-radio>
                    <el-radio v-model="original" label="2">转载</el-radio>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    原始链接：
                    <el-input v-model="originLink" size="small" placeholder="请输入链接" style="width:250px"></el-input>        
                </div>
            </el-col>
        </el-row>

        <el-row  style="margin-top:60px;text-align:left">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    是否置顶：
                    <el-radio v-model="topShow1" label="1">否</el-radio>
                    <el-radio v-model="topShow1" label="2">是</el-radio>
                </div>
            </el-col>
            <el-col :span="12">
                
                <div class="grid-content bg-purple-light">
                     发布形式：
                    <el-radio v-model="private" label="1">公开</el-radio>
                    <el-radio v-model="private" label="2">私密</el-radio>
                </div>
            </el-col>
        </el-row>

        
        <div style="margin-top:60px;margin-left:-60px">
            <el-button type="danger" plain   @click="save(1)">发布博客</el-button>
            <router-link to="/manageBlog" style="text-decoration: none;color:#a2a2a2">
                <el-button type="danger" plain style="margin-left:100px" >返回</el-button>
            </router-link>
            
        </div>



    </div>
</template>
<script>
export default {
    data(){
        return{
            'original':'1',
            'originLink':'',
            'topShow1':'1',
            'private':'1',
            'articleTitle':'',
            'articleType':'',
            'isClear': false,
            'detail':"",
            'isClear': false,
            'content':'',
            'articleTypeList':[],
            'articleTypes':[],
            'articleId':'',
            toolbars: {
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                mark: true, // 标记
                superscript: true, // 上角标
                quote: true, // 引用
                ol: true, // 有序列表
                ink: true, // 链接
                imagelink: true, // 图片链接
                help: true, // 帮助
                code: true, // code
                subfield: true, // 是否需要分栏
                fullscreen: true, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                /* 1.3.5 */
                undo: true, // 上一步
                trash: true, // 清空
                save: false, // 保存（触发events中的save事件）
                /* 1.4.2 */
                navigation: true // 导航目录
            }
        }
    },
    methods:{
        $imgAdd(pos, $file) {

             //上传图片操作
            // 第一步.将图片上传到服务器.
            var data = new FormData();
            data.append("file", $file);

            this.axios({
                url: '/file/uploadFilePi',
                method: 'post',
                data: data,
            }).then((res) => {
                /**
                 * pos 为原图片标志（0）
                 * url 为上传后图片的url地址
                 */
                 // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                this.$refs.md.$img2Url(pos, res.data.data[0]);
            })

        },

       
        save(flag){  //flag  保存为草稿/发布
            if(this.articleTitle.trim() == ""){
                this.$message({
                    type: 'warning ',
                    message: '文章标题不能为空'
                }); 
                return false;
            }
           
            
            var data = {
                "id":this.articleId,
                'title':this.articleTitle, //文章标题
                'type':this.articleType, //文章类型
                'top':this.topShow1=="2"?1:0, //是否置顶
                'originalLink':this.originLink, //原创链接
                'original':this.original=="1"?1:0,  //是否原创
                'privateBlog':this.private=="2"?1:0, //发布形式  公开/私密
                'content':this.detail, //内容
                'flag':flag,
                'articleTypes':this.articleTypes //选中内容
            }

            this.axios.post('/article/insertArticle',data).then(response=> {   //更新 博客/与创建博客共用一个接口
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                   
                    if(flag ==1 ){
                        this.$message({
                            type: 'info ',
                            message: '发布成功'
                        }); 
                    }
                   //跳转到
                   this.$router.push({path:'/manageBlog'});
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        },
        addTypes(type,flag){
            console.log(type+"------"+flag)
            if(flag == true){
                this.articleTypes.push(type);
            }else{
                var index = this.articleTypes.indexOf(type);
                this.articleTypes.splice(index,1);
            }
            console.log( this.articleTypes)
        }, 
        getArticleTypes(){
            this.axios.get('/articleType/getArticleTypes').then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                   console.log(response+"123123")
                   console.log(response.data.data);
                   this.articleTypeList = response.data.data;
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        },
        getMyArticleDetail(id){
            //根据id查询 博客详情
            this.axios.get('/article/getMyArticleDetail?id='+id).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                   console.log("根据id查询 博客详情")
                   console.log(response.data.data);
                var infoCont = response.data.data;
                this.articleTitle = infoCont.title;
                this.original = infoCont.original == 1 ?"1":"2";    //是否原创    1-原创 0-转载       
                this.topShow1 = infoCont.top == 1? "2":"1"; // 1-置顶   0-非置顶
                this.originLink = infoCont.original_link;
                this.private = infoCont.private_blog == 1?"2":"1";   //1-发布   0-草稿

                var types = infoCont.type.split(",");
                for(var i = 0;i<this.articleTypeList.length;i++){
                    for(var j = 0;j<types.length;j++ ){
                        if(types[j] == this.articleTypeList[i].name){
                            this.articleTypeList[i].flag = true;  //博客分类，哪些需要选中
                            this.articleTypes.push(this.articleTypeList[i].name);
                        }
                    }
                } 


                this.detail = infoCont.content;
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });


        }

    },
    mounted(){
        //查询当前用户 下 所有的 博客类型
        this.getArticleTypes();
        console.log("详情")
        console.log(this.$route.params.myBlogId);
        this.articleId = this.$route.params.myBlogId;
        //根据id查询  博客详情
        this.getMyArticleDetail(this.$route.params.myBlogId);
    }
}
</script>

<style scoped">
    
</style>